<br><br>
<script>
  var day_usage;
  var week_usage;
  var port_status;
  var remote_users;
  var recent_users;
  var time_formatter = function(o){
    var rec = o.record;
    var date = new Date(rec.getValue('timestamp') * 1000);
    return date.toDateString() + " " + date.toLocaleTimeString();
  };

  YUI().use('charts','datasource-io','datasource-jsonschema','datatable-datasource','datatable-scroll','datasource-polling', function(Y){
  
    var recent_users = new Y.DataTable.Base({
      columnset: [{key: "call_sign", label: "Call Sign"},
                  {key: "port", label: "Port"},
                  {key: "timestamp", label: "Time (UTC)", formatter: time_formatter}],
      summary: "Recent Users",
      caption: "Recent Users"
    });

    var recent_users_ds = new Y.DataSource.IO({source: "webservice/main.cgi?method=get_recent_users"});
    recent_users_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["call_sign","port","timestamp"]
      }});
    recent_users_ds.sendRequest({
      callback:{
        success: function(e){
	  Y.log(e);
	}
      }
    });

    recent_users.plug(Y.Plugin.DataTableScroll, {
      height: "200px"
    });

    recent_users.plug(Y.Plugin.DataTableDataSource,{
      datasource: recent_users_ds
    }).render("#recent_users");
    recent_users.datasource.load();
    setInterval(function(){
      recent_users.datasource.load()
    },1000);

    var ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_remote_users"});
    ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["call_sign"]
      }});
    ds.sendRequest({
      callback: {
        success: function(e){
          Y.log(e);
        }
      }
    });

    remote_users = new Y.DataTable.Base({
      columnset: [{key: "call_sign", label: "Call Sign", width: "190px"}],
      summary: "DV Dongle Users",
      caption: "DV Dongle Users"
    });
  
    remote_users.plug(Y.Plugin.DataTableScroll, {
      height: "150px"
    });

    remote_users.plug(Y.Plugin.DataTableDataSource, {
      datasource: ds
    }).render("#remote_users");

    remote_users.datasource.load();  

    setInterval(function(){
      remote_users.datasource.load()
    },1000);

    var port_status_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_port_status"});
    port_status_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["port","status"]
      }});

    port_status_ds.sendRequest({
      callback: {
        success: function(e){
          Y.log(e);
        }
      }
    });

    port_status = new Y.DataTable.Base({
      columnset: [{key: "port", label: "Port"},
                  {key: "status", label: "Status", width: "150px"}],
      height: "100px"
    });


    port_status.plug(Y.Plugin.DataTableDataSource, {
      datasource: port_status_ds
    }).render("#ports");

    port_status.datasource.load();

    setInterval(function(){
      port_status.datasource.load()
    },1000);

    var myDataValues = [
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0}
];

    day_usage = new Y.Chart({
      dataProvider: myDataValues,
      render: "#day_activity",
      categoryKey: "timestamp",
      categoryType: "time",
      styles: {
                axes: {
                        timestamp: {
                                label: {
                                         rotation: -45
				       }
                                }
                      }
               },
      seriesKeys: ["usage"]
    });

    var axes = day_usage.getAxisByKey("timestamp");
    axes.set('labelFunction',function(value){
      var date = new Date(value * 1000);
      return date.toLocaleTimeString();
    });


    var day_usage_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_usage&time_frame=86400"});
    day_usage_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["timestamp","usage"]
      }});

    day_usage_ds.sendRequest({
      callback: {
        success: function(e){
          Y.log(e);
	  Y.Array.each(e.response.results, function(node){
	    node.timestamp = new Date(node.timestamp).toString();
	  });
          day_usage.set('dataProvider',e.response.results);
	  //day_usage.render("#day_activity");
        },
        failure: function(e){
	  alert(e.response);
	}
      }
    });

    week_usage = new Y.Chart({
      dataProvider: myDataValues,
      render: "#week_activity",
      categoryKey: "timestamp",
      categoryType: "time",
      styles: {
               axes: {
                        timestamp: {
                                label: {
                                         rotation: -45
                                       }
                                }
                      }
               },
	       
      seriesKeys: ["usage"]
    });

    var week_usage_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_usage&time_frame=604800"});
    week_usage_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["timestamp","usage"]
      }});
    week_usage_ds.sendRequest({
      callback: {
        success: function(e){
          Y.log(e);
          week_usage.set('dataProvider',e.response.results);
          //week_usage.render("#week_activity");
        }
      }
    });

    var axes = week_usage.getAxisByKey("timestamp");
    axes.set('labelFunction',function(value){
      var date = new Date(value * 1000);
      return date.toDateString();
    });

    var top_talkers = new Y.Chart({
      dataProvider: [{total_minutes: 0, SrcStn: "KB9JHU"},{total_minutes: 0, SrcStn: "KC9EVU"}],
      render: "#top_talkers",
      type: "column",
      categoryKey: "SrcStn",
      seriesKeys: ["total_minutes"]
    });

    var top_talkers_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_top_talkers"});
    top_talkers_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["SrcStn","total_minutes"]
      }});
    top_talkers_ds.sendRequest({
      callback: {
        success: function(e){
          Y.log(e);
          top_talkers.set('dataProvider',e.response.results);
        }
      }
    });

    var unique_callsigns = new Y.Chart({
      dataProvider: [{timestamp: 123, unique_calls: 0},{timestamp: 12434, unique_calls: 0}],
      render: "#unique_callsigns",
      categoryKey: "timestamp",
      categoryType: "time",
      styles: {
               axes: {
                        timestamp: {
                                label: {
                                         rotation: -45
                                       }
                                }
                      }
               },

      seriesKeys: ["unique_calls"]
    });

    var unique_call_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_unique_callsigns_per_day"});
    unique_call_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["timestamp","unique_calls"]
      }});
    unique_call_ds.sendRequest({
      callback: {
        success: function(e){
          Y.log(e);
	  
          unique_callsigns.set('dataProvider',e.response.results);
        }
      }
    });

    var axes = unique_callsigns.getAxisByKey("timestamp");
    axes.set('labelFunction',function(value){
      var date = new Date(value * 1000);
      return date.toDateString();
    });

  });  
</script>

<div>

  <div style="float: left; min-width: 200px; width: 19%; padding-left: 5px;">
    <center>
      <h3>Recent Users (last day)</h3>
      <div id="recent_users"></div>
      <h3>Port Status</h3>
      <div id="ports"></div>
      <h3>DV Dongle Users</h3>
      <div id="remote_users"></div>
    </center>
  </div>

  <div style="float: left; padding-left: 5px; width: 79%">
    <table style="width: 100%;height: 600px;position:relative;">
      <tr style="height: 300px;"><td style="width: 49%;padding: 20px; padding-top: 0px;"><center><h3>24hr Activity (minutes of xmit)</h3></center><div id="day_activity" style="height: 99%; width: 99%;"></div></td><td style="padding-bottom: 20px"><center><h3>Top Talkers (Top 5 Calls)</h3></center><div id="top_talkers" style="height: 99%; width: 99%"></div></td></tr>
      <tr style="height: 300px;"><td style="width: 49%;padding: 20px;padding-bottom: 0px"><center><h3>Week activity (minutes of xmit)</h3></center><div id="week_activity" style="height: 99%; width: 99%"></div></td><td style="padding-top: 20px"><center><h3>Unique Callsigns (30 days)</h3></center><div id="unique_callsigns" style="height: 99%; width: 99%"></div></td></tr>
    </table>
  </div>
  <div style="clear: both"></div>
</div>
